<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Canvas (HTML-Element)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Canvas_(HTML-Element)"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Canvas_HTML-Element rootpage-Canvas_HTML-Element skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Canvas (HTML-Element)</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p>Ein <b>Canvas</b>-Element (vom englischen <i><span lang="en">canvas</span></i> für „<a href="Leinwand" title="Leinwand">Leinwand</a>“ oder „<a href="Gem%C3%A4lde" title="Gemälde">Gemälde</a>“) ist ein – in der Sprache <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> – mit Höhen- und Breiten-Angaben beschriebener Bereich, in den per <a href="JavaScript" title="JavaScript">JavaScript</a> gezeichnet werden kann.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Ursprünglich von der Firma <a href="Apple" title="Apple">Apple</a> als Bestandteil des <a href="WebKit" title="WebKit">WebKit</a> entwickelt, ist es später von der Arbeitsgruppe <a href="Web_Hypertext_Application_Technology_Working_Group" title="Web Hypertext Application Technology Working Group">WHATWG</a> als Bestandteil der Auszeichnungssprache <a href="HTML5" title="HTML5">HTML5</a> standardisiert worden.
</p>
<div class="mw-heading mw-heading2"><h2 id="Fähigkeiten"><span id="F.C3.A4higkeiten"></span>Fähigkeiten</h2></div>
<p>Neben normalen Linien- und Rechteckszeichenfunktionen ermöglicht Canvas unter anderem das Zeichnen von:
</p>
<ul><li><a href="Kreisbogen" title="Kreisbogen">Kreisbögen</a></li>
<li><a href="B%C3%A9zierkurve" title="Bézierkurve">Bézierkurven</a> (quadratisch und kubisch)</li>
<li><a href="Gradient_(Grafik)" class="mw-redirect" title="Gradient (Grafik)">Farbverläufen</a></li>
<li>Grafiken (Formate: PNG, GIF, JPEG), die <a href="Skalierung_(Computergrafik)" title="Skalierung (Computergrafik)">skaliert</a>, positioniert und beschnitten werden können</li>
<li><a href="Alphakanal" title="Alphakanal">Transparenz</a> (mit mehreren Abstufungen)</li>
<li>Text</li></ul>
<p>Objekte und Objektgruppen können <a href="Koordinatentransformation#Verschiebung_(Translation)" title="Koordinatentransformation">verschoben</a>, <a href="Koordinatentransformation#Drehung_(Rotation)" title="Koordinatentransformation">rotiert</a> und skaliert werden.
</p><p>Wie bei <a href="OpenGL" title="OpenGL">OpenGL</a> und <a href="DirectX" title="DirectX">DirectX</a> auch können Objekte in einem <a href="Stapelspeicher" title="Stapelspeicher">Stack</a> abgelegt werden, was die gezielte Manipulation von Objektgruppen ermöglicht.
Animationen sind mittels Verwendung von JavaScript-Zeitfunktionen möglich.
</p><p>Die Ausgabe von <a href="Vektorgrafik" title="Vektorgrafik">Vektorgrafik</a> wird nicht unterstützt.
</p>
<div class="mw-heading mw-heading2"><h2 id="Unterstützung"><span id="Unterst.C3.BCtzung"></span>Unterstützung</h2></div>
<p>Canvas wird von aktuellen Browsern nativ unterstützt.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>
</p><p>Microsofts <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> unterstützt Canvas ab Version 9. Alte Versionen können jedoch mit <a href="Plug-in" title="Plug-in">Plugins</a>, welche von Mozilla und Google zur Verfügung gestellt werden, um die Canvas-Funktion erweitert werden.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>
<ul><li><a href="Canvas_Fingerprinting" class="mw-redirect" title="Canvas Fingerprinting">Canvas Fingerprinting</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-canvas-element">Offizielle Canvas-Beschreibung</a> (englisch)</li>
<li><a rel="nofollow" class="external text" href="http://www.ajaxschmiede.de/canvas/einfuehrung-in-canvas/">Einführung in Canvas</a></li>
<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Ausführliches Canvas-Tutorial bei Mozilla.org</a> (englisch)</li>
<li><a rel="nofollow" class="external text" href="http://canvas.quaese.de/">canvas.quaese.de</a> – Dokumentation, Einleitungen mit Beispielen, weiterführende Links</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://www.privacy-handbuch.de/handbuch_21t.htm"><i>Fingerprinting mit HTML5 Canvas Elementen blockieren.</i></a> In: <i>Privacy-Handbuch.</i><span class="Abrufdatum"> Abgerufen am 18. Januar 2019</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACanvas+%28HTML-Element%29&rft.title=Fingerprinting+mit+HTML5+Canvas+Elementen+blockieren&rft.description=Fingerprinting+mit+HTML5+Canvas+Elementen+blockieren&rft.identifier=https%3A%2F%2Fwww.privacy-handbuch.de%2Fhandbuch_21t.htm&rft.date="> </span></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://caniuse.com/#search=canvas"><i>Support tables for HTML5, CSS3, etc.</i></a><span class="Abrufdatum"> Abgerufen am 26. April 2018</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACanvas+%28HTML-Element%29&rft.title=Support+tables+for+HTML5%2C+CSS3%2C+etc&rft.description=Support+tables+for+HTML5%2C+CSS3%2C+etc&rft.identifier=&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://arstechnica.com/software/news/2008/08/mozilla-drags-ie-into-the-future-with-canvas-element-plugin.ars"><i>"Mozilla drags IE into the future with Canvas element plugin".</i></a> Ars Technica,<span class="Abrufdatum"> abgerufen am 27. Juli 2011</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACanvas+%28HTML-Element%29&rft.title=%22Mozilla+drags+IE+into+the+future+with+Canvas+element+plugin%22&rft.description=%22Mozilla+drags+IE+into+the+future+with+Canvas+element+plugin%22&rft.identifier=&rft.publisher=Ars+Technica&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://excanvas.sourceforge.net/"><i>"ExplorerCanvas".</i></a> Sourceforge,<span class="Abrufdatum"> abgerufen am 29. November 2011</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3ACanvas+%28HTML-Element%29&rft.title=%22ExplorerCanvas%22&rft.description=%22ExplorerCanvas%22&rft.identifier=&rft.publisher=Sourceforge&rft.date=&rft.language=en"> </span></span>
</li>
</ol></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-08-18" href="https://de.wikipedia.org/wiki/?title=Canvas_(HTML-Element)&oldid=258957506">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>